<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue入门</title>
</head>
<body>
    <div id="div">
        <!--插值表达式: {{}}-->

        <div>{{msg}}</div>
        <!--
            三元表达式
        -->
        <!--{{1==1?"yes":"no"}}-->
        <!--
            :属性/v-bind:属性    绑定属性
        -->
        <input type="text" :value="username"/>
        <button type="button" v-on:click="fun">vueTest</button>
        <br/>
        <span v-text="msg"></span>
        <br/>
        <span v-html="msg"></span>
        <br/>
        <a v-bind:href="url">百度一下</a>
        <br/>
        <a :href="url">百度一下</a>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    //传统的js
    //document.getElementById("div1").append("我是div"); 追加
    //document.getElementById("div1").innerHTML = "我是div";

    //vue操作
    //创建vue对象
    new Vue({
        el:"#div",//指定接管的页面区域
        data:{//生产数据的区域
            msg:"<em>Hello Vue</em>",
            url:"https://www.baidu.com",
            username:"张三"
        },

        methods:{//申明函数的区域
            /*fun1:function () {
                alert('test vue')
            }*/

            fun(){
                alert('test vue')
            }
        }
    });
</script>
</html>